<template>
  <div class="munebox">
    <h4 class="menu-title">板块列表</h4>
    <ul class="fatherContainer">
      <li class="fatherarea" 
        v-for="(item,index) of list" 
        :key="item.id"  
      >
        <div class="level-one" @click="showToggle(item,index)" >
          <span>
            {{item.title}}
          </span>
          <i class="iconfont">&#xe62d;</i>
        </div>
        <ul class="childContainer" v-show="item.isSubShow" ref="childList">
          <li 
            v-for="child of item.children" 
            :key="child.id" 
            
          >
            <div class="level-two">
              <i class="iconfont">&#xe606;</i>
              <span>{{child.title}}</span>
            </div>
          </li>
          <div class="forborder"></div>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'MenuBox',
  data () {
    return {
      list: {},
      id: ''
    }
  },
  methods: {
    getListInfo () {
      const _this = this;
      this.id = this.$route.query.data;
      axios.get('/api/source/home.json').then(function(response){
        if(response.data.ret && response.data.data){
          _this.list = response.data.data;
          _this.openGroup();
        }
      })
    },
    showToggle (item,index) { 
      for (let i in this.list) {
        if (this.list[i].isSubShow !== this.list[index].isSubShow) {
          this.list[i].isSubShow = false
        }
      }
      item.isSubShow = !item.isSubShow; 
    },
    openGroup () {
      const groupId = this.id.substring(0,4)+'0';
      for (let j in this.list) {
        if (groupId == this.list[j].id) {
          this.list[j].isSubShow = true;
        }else{
          this.list[j].isSubShow = false;
        }
      }
    },
    changeItemStyle () {
      const groupIndex = this.id.substring(3,4)-1;
      const itemIndex = this.id.substring(4)-1;
      $('.childContainer li div').removeClass('active');
      $('.childContainer li div').on('click',function(){
        $(this).addClass('active')
      })
    },
    handleRouteChange (item) {
      this.$route.meta.title = item.title + ' - 核客论坛 - Powered by phpwind';
    }
  },
  created () {
    this.getListInfo();
  },
  mounted () {
    this.changeItemStyle();
    const _this = this;
    this.$nextTick(()=>{
      $(function(){
        _this.changeItemStyle()
      })
     
   })
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/variables.styl';
  .munebox
    background: #fcfcfc
    border: none
    color: $font-welcome
    .menu-title
      font-size: .24rem
      font-weight: bold
      padding-bottom: .2rem
      border-bottom: .02rem solid $borderColor
      margin-bottom: .2rem
    .fatherContainer
      .level-one
        background-color: #fcfcfc
        color: #333
        font-size: .24rem
        height: .58rem
        line-height: .58rem
        padding-left: .25rem
        .iconfont
          float: right
          margin-right: .25rem
          font-weight: bold
          color: #b3b3b3
          font-size: .24rem
          vertical-align: middle
      .level-one:hover
       background: #eee
    .childContainer
      li div
        height: .54rem
        line-height: .54rem
        font-size: .24rem
        color: #666
        padding-left: .25rem
        .iconfont
          font-size: .24rem
          vertical-align: middle
          margin-left: -.3rem 
          margin-left: .06rem
      .active
        font-weight: bold
        background: #eee
      li div:hover
        background: #eee
      .forborder
        margin: .15rem .1rem .2rem.1rem
        height: .05rem
        border: 0
        border-bottom: .02rem dashed $borderColor 
</style>

